<template>
  <el-select v-model="summary" style="width:100%;height:60px" placeholder="摘要" class="filter-item iiuu" filterable allow-create @blur="changeVal1" @change="changeVal2">
    <el-option v-for="(item, idx) in summaryList" :key="idx" :label="item.summary" :value="item.summary" />
  </el-select>
</template>
<script>
import { deepClone } from '@/utils'
export default {
  name: 'SummaryList',
  props: {
    dataList: {
      type: Array,
      required: true
    },
    index: {
      type: Number,
      default: 0
    },
    val: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      summary: '',
      summaryList: this.dataList
    }
  },
  watch: {
    dataList() {
      this.summaryList = deepClone(this.dataList)
      this.summary = this.val
    },
    val() {
      this.summary = this.val
      if (this.val && this.summaryList.length === 0) {
        this.summaryList = { summary: this.summary }
      }
    }
  },
  created() {
    if (this.val) {
      this.summary = this.val
      this.summaryList = { summary: this.summary }
    }
  },
  methods: {
    changeVal1(event) {
      if (event.target.value) {
        const obj = {
          summary: event.target.value,
          index: this.index
        }
        this.$emit('changeVal', obj)
      }
    },
    changeVal2(val) {
      const obj = {
        summary: val,
        index: this.index
      }
      console.log('1111')
      this.$emit('changeVal', obj)
    }
  }
}
</script>
